<!-- 生成vue3代码 -->
<template>
  <div class="app-container">
    <div>
      <div class="pos-box">
        <div :class="`pos-item ${item.id === currentPosId ? 'active' : ''}`" v-for="(item, index) in posList"
          :key="item.id + index">
          <div class="pos-name" @click="changeCheck(item, index)">{{ item.id }}</div>
        </div>
        <div>
          <div class="input-item">
            <div style="color: #fff;margin: 0px 5px;">当前点位</div>
            <span style="color: #fff;margin: 0px 5px;">{{ currentPosId }}</span>
          </div>
          <div class="input-item">
            <div style="color: #fff;margin: 0px 5px;">经度</div>
            <input type="text" :placeholder="currentPos[0]" />
          </div>
          <div class="input-item">
            <div style="color: #fff;margin: 0px 5px;">纬度</div>
            <input type="text" :placeholder="currentPos[1]" />
          </div>
        </div>
      </div>
      <div class="input-container">
        <div class="input-item">
          <div class="input-title">海拔高度</div>
          <input type="text" v-model="posHeight" placeholder="请输入高度" />
          <span style="color: #fff;">m</span>
        </div>
        <div class="input-item">
          <div class="input-title">轨迹网格</div>
          <input type="text" v-model="trackGridEdge" placeholder="请输入棱长" />
          <span style="color: #fff;">m</span>
        </div>
        <div class="input-item">
          <div class="input-title">空间网格</div>
          <input type="text" style="width: 70px;user-select: none;" disabled v-model="spaceGridEdge"
            placeholder="请输入棱长" />
          <span style="color: #fff;">m</span>
          <input type="text" style="width: 70px;user-select: none;" disabled v-model="edgeLengthPoint"
            placeholder="分割点数" />
          <span style="color: #fff;">个</span>
        </div>
      </div>
      <div class="btn-box">
        <div class="sbmit-btn" @click="editPos">编辑</div>
        <div class="sbmit-btn" @click="insertBefore">前插入</div>
        <div class="sbmit-btn" @click="insertAfter">后插入</div>
        <div class="sbmit-btn" @click="deletePos">删除</div>
        <div class="sbmit-btn" @click="savePos">保存</div>
      </div>
    </div>
  </div>
</template>

<script>
import EditRoute from './EditRoute.js'
import GridClass from "../SpaceGrid.js";
let editRoute = null
let spaceGrid = null
export default {
  name: 'TestDomeThree',
  props: ['uavid'],
  data () {
    return {
      posList: [],
      currentPosId: 1,
      currentPos: [],
      isEdit: false,
      posHeight: 100.0,
      trackGridEdge: 15.0,
      spaceGridEdge: 2000.0,
      edgeLengthPoint: 100
    }
  },
  watch: {
    posHeight (val) {
      console.log(val);
      if (editRoute) {
        editRoute.updateHeight(val)
      }
    },
    edgeLengthPoint (val) {
      if (spaceGrid) {
        spaceGrid.drawGrid(this.spaceGridEdge, val)
      }
    },
    spaceGridEdge (val) {
      if (spaceGrid) {
        spaceGrid.drawGrid(val, this.edgeLengthPoint)
      }
    },
    trackGridEdge (val) {
      editRoute.drawBox(val)
    }
  },
  methods: {
    initPosList (viewer) {
      editRoute = new EditRoute(viewer, this.posHeight)
      spaceGrid = new GridClass(viewer)
      spaceGrid.drawGrid(this.spaceGridEdge, this.edgeLengthPoint)
      this.posList = [
        {
          id: 1,
          name: 'A',
          pos: [110.0001, 39.99925, 100.0]
        },
        {
          id: 2,
          name: 'B',
          pos: [110.0002, 39.99926, 100.0]
        },
        {
          id: 3,
          name: 'C',
          pos: [110.0003, 39.99927, 100.0]
        },
        {
          id: 4,
          name: 'D',
          pos: [110.0004, 39.99928, 100.0]
        },
      ]
      this.currentPos = this.posList[0].pos
      this.currentPosId = this.posList[0].id
    },
    insertBefore (index) {

    },
    insertAfter (index) {

    },
    deletePos (index) {
      this.posList.splice(index, 1)
    },
    savePos () {
      console.log(this.posList);
    },
    editPos () {
      console.log(this.posList);
    },
    changeCheck (item) {
      this.currentPosId = item.id
      this.currentPos = item.pos
    }
  }
}
</script>

<style scoped>
.app-container {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 999;
  width: 400px;
  min-height: 25vh;
  background-color: #000;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0.5;
}

.btn-box {
  /* position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.sbmit-btn {
  width: 60px;
  height: 30px;
  background-color: blue;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  user-select: none;
  margin: 0 5px;
}

.sbmit-btn:active {
  background-color: #0033ff;
}

.input-item {
  display: flex;
  margin-top: 10px;
}

.input-title {
  color: #fff;
  margin-right: 5px;
}

.pos-box {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 16vh;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 8px;
  background-color: #2f1d1d;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.pos-item {
  background-color: #110707;
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 4px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.active {
  background-color: #0033ff;
}

.pos-item:active {
  background-color: #0033ff;
}

.pos-name {
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>